(function(window){
    var imageUpLoad={};
    imageUpLoad.config={};

    /**初始化运行环境**/
    function initRunTime(){
        //css
        document.querySelector("head").innerHTML+="";
        //jq
       if (typeof(jQuery)=="undefined"){          
           document.querySelector("head").innerHTML+=' <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>'
       }
       
       $("#app").html(imageUpLoad.view.createFileUpBox([]));
       
       eventInit();

}


 function eventInit(){
     $(document).on("click",".ant-upload-select",function(){
           document.getElementById('fileUp-input').click();
     });

      $(document).on("click",".anticon-delete",function(){
          var id=$(this).attr("data-id");
          $("#"+id).remove();

     });
      document.getElementById('fileUp-input').onchange=fileUpBtnEvent;
 }


 function fileUpBtnEvent(){
            var inputFile=document.getElementById("fileUpLoadBox");          
            var file = this.files[0];         
            // document.getElementById('input-parent').onload=initInput;
            //判断是否是图片类型
            if(!/image\/\w+/.test(file.type)){ 
                    alert("只能选择图片");
                    return false;
            }
            var reader = new FileReader();
          
            reader.readAsDataURL(file);          
            reader.onload = function(e){ 
                var picList=$(".ant-upload-list-picture-card");
                if(picList.length<1){
                    $(".code-box-demo .clearfix").prepend( imageUpLoad.view.createImageView({src:this.result}))
                }else{
                    picList.last().after( imageUpLoad.view.createImageView({src:this.result}))       
                }
                
                        
            }  
 }


  imageUpLoad.view={
      createImageView:function(image){
        var id=new Date().getTime();
        return        ` 
            <div id ="${id}" class="ant-upload-list ant-upload-list-picture-card file-up-load-item"  imagesdata=${JSON.stringify(image)}>
            <div class="ant-upload-list-item ant-upload-list-item-done">
            <div class="ant-upload-list-item-info">
                <span>
                    <a class="ant-upload-list-item-thumbnail" href="${image.src}" target="_blank" rel="noopener noreferrer">
                        <img src="${image.src}" alt="xxx.png">
                    </a>
                    <a href="${image.src}" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name" title="xxx.png">xxx.png</a>
                </span>
            </div>
            <span class="ant-upload-list-item-actions">
            <a href="${image.src}" target="_blank" rel="noopener noreferrer" title="Preview file">
            <i class="anticon anticon-eye-o"></i>
            </a>
            <i title="Remove file" class="anticon anticon-delete" data-id="${id}"></i></span>      
            </div>
            </div>`;
      },
      createFileUpBox:function(imageList,option){
        var imageListHtml="";
        if(imageList.length>=1){
            imageListHtml=imageList.map(item=>this.createImageView(item));
        }
        return  ` 
       <section  class="code-box-demo" id='fileUpLoadBox'> 
        <div class="clearfix">   
           ${imageListHtml}       
           ${this.createFileUpBtn(option)}
        </div>
      </section>`;
    },
    createFileUpBtn:function(option){
        option=$.extend({fileUpBtn:true},option)
        if(option.fileUpBtn!=true){
            return "";
        }
        return `<div class="ant-upload ant-upload-select ant-upload-select-picture-card" >
            <span tabindex="0" class="ant-upload" role="button">
                <span id="input-parent">
                 <input id="fileUp-input" type="file" accept="" style="display: none;" />
                </span>
            <div>
                <i class="anticon anticon-plus"></i>
                <div class="ant-upload-text">
                上传图片
                </div>
            </div></span>
            </div></span>`;
    }
  }
  initRunTime();
  window.imageUpLoad=imageUpLoad;
})(window)